<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
          *{
          	padding:0;
          	margin:0;
          }

		#box{
			width: 200px;
			height: 200px;
			padding:20px;
			border:2px solid black;
			margin:30px;	
		}
		.a{
			position: relative;
			width: 400px;
			height: 400px;
			border:5px solid black;
			margin:50;
		}
		#wrap{
			width: 300px;
			height: 300px;
			border:5px solid black;
			/*垂直方向滚动*/
			/*overflow-y: scroll;*/
			overflow: scroll;
		}
		.in{
			width: 600px;
			height: 600px;
			background: red;
		}
	</style>
</head>
<body>
	<div class="a">
	<div id="box"></div>
	</div>
	<div id="wrap">
		<div class ="in"></div>
	</div>
</body>
</html>
<script>
	var boxDiv = document.querySelector("#box");
     
     //clientWidth:padding-left width   padding-right
    
	console.log(boxDiv.clientWidth);//240内尺寸,不包括border,

    //clientHeight:paddong-top height padding-bottom
	console.log(boxDiv.clientHeight);//240




	//外尺寸,包含border，不包含margin
	console.log(boxDiv.offsetWidth);//244
	console.log(boxDiv.offsetHeight);//244

    //上border
	console.log(boxDiv.clientTop);//2

	//左border
	console.log(boxDiv.clientLeft);//2
    
    //判断对象中有没有该属性（包含父辈元素的属性）
	var result = "clientTop" in boxDiv;
	console.log(result);//true

	var result = "clientRight" in boxDiv;
	console.log(result);//false

	var result = "toString" in boxDiv;
	console.log(result);//true

    //垂直方向相对于offsetParent的内边框距离
	console.log(boxDiv.offsetTop);//30

	//水平方向相对于offsetParent的内边框距离
	console.log(boxDiv.offsetLeft);//30
    

    //offsetParent:距离自己最近的具有定位样式（值不为static）的父辈元素，祖宗是body
	console.log(boxDiv.offsetParent);



	//滚动尺寸
	//获取wrap元素
	var wrapDiv = document.getElementById("wrap");
     //滚动高度，宽度
	console.log(wrapDiv.scrollHeight);
	console.log(wrapDiv.scrollWidth);
	
	wrapDiv.onclick = function(){
		//垂直方向滚动的距离
		console.log(wrapDiv.scrollTop);
		//水平方向滚动的距离
		console.log(wrapDiv.scrollLeft);
	};






</script>